import { StyledLineWrap } from './style'
import { Input, ruleType } from '@kedacom/react-next'
import { useVirtualRoomStore } from '../../store'
import shallow from 'zustand/shallow'
import { fetchCheckVirtualRoomNameExisted } from '@/api/sysConfig/virtualRoomConfig'
import { useEffect, useState } from 'react'
import { getRule } from '../../rules'
import { t } from 'i18next'

const BasicInfo = () => {
	const [rule, setRule] = useState<ruleType>({})
	const { data, updateData } = useVirtualRoomStore(
		(state) => ({
			data: state.data,
			updateData: state.updateData,
		}),
		shallow
	)

	useEffect(() => {
		let obj = getRule('name')
		obj.regular?.push(
			{
				regex: async (v: string) => {
					let flag = await fetchCheckVirtualRoomNameExisted(v, data.vmrMoid)
					return flag
				},
				msg: t('会议室名称已存在'),
			},
			{
				regex: (v: string) => !/^[\u4e00-\u9fa5A-Za-z0-9]/.test(v) || !/[\u4e00-\u9fa5A-Za-z0-9]$/.test(v),
				msg: t('首尾字符仅允许输入：英文、数字、汉字'),
			}
		)
		setRule(obj)
	}, [])
	return (
		<>
			<StyledLineWrap>
				<div className="label">{t('会议室名称')}</div>
				<Input
					value={data.name}
					width={485}
					focusMsg={t(`最多可输入32个字符，包括英文、汉字、数字、"_"、"-"、"@"、"."、"("、")"、"#"`)}
					maxLength={32}
					rule={rule}
					onChange={(e, v) => {
						updateData({ name: v })
					}}
				/>
			</StyledLineWrap>
			<StyledLineWrap>
				<div className="label">{t('虚拟会议室号码')}</div>
				<div className="num_text">{data.vmrE164 ? data.vmrE164 : t('保存后获取虚拟会议室号码')}</div>
			</StyledLineWrap>
		</>
	)
}

export default BasicInfo
